<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />

    <title>Partytown Twitter Embed</title>

    <link
      rel="icon"
      id="favicon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      nav a {
        display: block;
        padding: 16px 8px;
      }
      nav a:link,
      nav a:visited {
        text-decoration: none;
        color: blue;
      }
      nav a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
    <script id="hack">
      (function () {
        let iFrameCount = 0;
        function observe(target, prop, predicate = () => true) {
          let name = `${window.hack ? '' : 'INNER '}${target.constructor.name}.${prop}`;
          let originalDesc = Object.getOwnPropertyDescriptor(target, prop);
          if (!originalDesc) throw new Error(name + ' does not exist');
          let newDesc = { ...originalDesc };
          if (!('value' in newDesc)) {
            newDesc.set = function (value) {
              predicate(this) && console.log(name, 'SET', value, this);
              return originalDesc.set.call(this, value);
            };
            newDesc.get = function () {
              if (document.getElementById('twitter-widget-0') && iFrameCount++ == 5) {
                //debugger;
              }
              const value = originalDesc.get.call(this);
              if (predicate(this)) {
                //console.log(name, 'GET', value, this.getAttribute('style'), this);
                //if (name == 'HTMLElement.offsetHeight' && value == 438) debugger;
              }
              return value;
              if (typeof value == 'object' && value !== null) {
                try {
                  return logProxy(value, '?' || String(this));
                } catch (e) {
                  console.error(e);
                  debugger;
                  return value;
                }
              } else {
                return value;
              }
            };
          }
          Object.defineProperty(target, prop, newDesc);
        }
        let count = 0;
        function logProxy(delegate, name) {
          return new Proxy(delegate, {
            get(target, prop) {
              let value = target[prop];
              //console.log('STYLE GET', name, prop, value);
              return value;
            },
            set(target, prop, value) {
              console.log('STYLE SET', name, prop, value);
              if (value == '422px') {
                console.log('/////////////////////');
                debugger;
              }
              if (count++ == 10) {
                //debugger;
              }
              return (target[prop] = value);
            },
          });
        }

        observe(HTMLElement.prototype, 'style', (obj) => false && obj.id == 'twitter-widget-0');
        observe(Element.prototype, 'getBoundingClientRect', () => true);
        observe(Element.prototype, 'getClientRects', () => true);
        observe(HTMLElement.prototype, 'offsetWidth', (obj) => obj.id == 'twitter-widget-0');
        observe(HTMLElement.prototype, 'offsetHeight', () => true);
        observe(Element.prototype, 'clientWidth', () => true);
        observe(Element.prototype, 'clientHeight', () => true);
        observe(Element.prototype, 'scrollWidth', () => true);
        observe(Element.prototype, 'scrollHeight', () => true);
      })();
    </script>
    <script>
      partytown = {
        resolveUrl(url, location) {
          if (
            url.hostname.includes('syndication.twitter.com') ||
            url.hostname.includes('cdn.syndication.twimg.com')
          ) {
            const proxyUrl = new URL('https://cdn.builder.io/api/v1/proxy-api');
            proxyUrl.searchParams.append('url', url);
            return proxyUrl;
          }
        },
        forward: [],
        // logCalls: true,
        // logGetters: true,
        // logSetters: true,
        // logImageRequests: true,
        // logMainAccess: true,
        // logSendBeaconRequests: true,
        // logStackTraces: false,
        // logScriptExecution: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>
    <script>
      setTimeout(() => {
        let errors = document.querySelector('[data-pterror]');
        let elm = document.createElement('div');
        elm.id = 'pterrors';
        if (errors) {
          elm.textContent = 'ERROR';
        } else {
          elm.textContent = 'NO ERROR';
        }
        document.body.appendChild(elm);
      }, 3000);
    </script>
  </head>
  <body>
    <h1>Partytown Twitter Embed 🎉</h1>

    <!-- prettier-ignore -->
    <!-- <blockquote class="twitter-tweet"><p lang="en" dir="ltr">How <a href="https://twitter.com/builderio?ref_src=twsrc%5Etfw">@builderio</a> cut 99% of their JavaScript with <a href="https://twitter.com/QwikDev?ref_src=twsrc%5Etfw">@QwikDev</a> + Partytown<a href="https://t.co/VhdljVdqrZ">https://t.co/VhdljVdqrZ</a> <a href="https://t.co/vb9VLu7vbJ">https://t.co/vb9VLu7vbJ</a></p>&mdash; Qwik WebDev Framework (@QwikDev) <a href="https://twitter.com/QwikDev/status/1468672275775950854?ref_src=twsrc%5Etfw">December 8, 2021</a></blockquote> -->
    <hr />
    <a
      class="twitter-timeline"
      data-tweet-limit="1"
      data-chrome="nofooter noborders"
      data-dnt="true"
      href="https://twitter.com/QwikDev"
    ></a>
    <script
      async
      src="https://platform.twitter.com/widgets.js"
      charset="utf-8"
      type-x="text/partytown"
    ></script>

    <hr />
    <nav>
      <p>
        <a href="/tests/integrations/twitter/standard.html?coep=false">Standard Twitter Embed</a>
      </p>
      <p><a href="/tests/">All Tests</a></p>
    </nav>
  </body>
</html>
